<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <div class="table-search-container">
                    <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="100px" class="table-form">
                        <el-row>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="账户地址">
                                    <el-input v-model="state.ruleForm.address" style="width: 100%" placeholder="账户地址"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                    <!-- <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                        <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                        <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                    </div> -->
                                    <div>
                                        <el-button size="default" type="primary" @click="refresh()">查询
                                        </el-button>
                                        <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-table :data="state.dataList" style="width: 100%;" row-key="address" border lazy :load="load"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column fixed="left" align="left" label="用户地址" width="300" show-overflow-tooltip>
                        <template #default="scope">
                            <span>(V{{ scope.row.userLevel || 0 }}){{ scope.row.address || "-" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="激活" width="100">
                        <template #default="scope">
                            <el-tag v-if="scope.row.activateStatus != 10" effect="dark" type="success">是</el-tag>
                            <el-tag v-if="scope.row.activateStatus == 10" effect="dark" type="danger">否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="上级" width="300" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.parentAddress }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="直推人数" width="100" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.directActiveCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="小区业绩" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.teamSmallPerformance || 0 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="投资金额" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalInvestmentAmount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="团队业绩" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.teamPerformance || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="锁仓数量" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalLockedKisar || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="释放数量" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalReleasedKisar || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="订单总数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.orderCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="解锁总数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.releasedOrderCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="排单奖励次数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.orderQueueRewardCount || 0 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" align="center" label="操作" width="150">
                        <template #default="scope">
                            <div style="margin: 5px 0px;" v-if="scope.row.parentAddress">
                                <el-button type="primary" size="small" @click="handlerEdit2(scope.row)">
                                    查看上级
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-card>

    </div>
</template>

<script setup lang="ts" name="systemMenu">
import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useGatherApi } from '/@/api/gather/index'
const routerT = useRoute();
const state = reactive({
    isToggle: false,
    dataList: [] as any,
    levelList: [] as any,
    ruleForm: {
        address: "0x8888888888888888888888888888888888888888" as any,
    }
});
const refresh = () => {
    getTreeData();
}
const getLevel = (lev: any) => {
    let str = "";
    state.levelList.forEach(element => {
        if (element.id == lev) {
            str = element.levelName;
        }
    });
    return str;
}
const handlerEdit2 = async (row: any) => {
    state.dataList = [];
    let vo = {} as any;
    vo["address"] = row.parentAddress;
    let element = await useGatherApi().getAddressInfo(vo);
    let tempList = [] as any;
    element.children = [];
    element.hasChildren = true;
    tempList.push(element)
    state.dataList = tempList;

}

const handleResetSearch = () => {
    state.ruleForm = {
        address: "",
    };
    getTreeData();
}

const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}

const load = async (row: any, treeNode: any, resolve: any) => {
    let vo = {} as any;
    vo["address"] = row.address;
    let resList = await useGatherApi().getChildData(vo);
    let tempList = [] as any;
    resList.forEach((element: any) => {
        element.children = [];
        element.hasChildren = true;
        tempList.push(element)
    });
    resolve(tempList)
}

const getTreeData = async () => {
    let vo = {} as any;
    state.dataList = [];
    if (!state.ruleForm.address) return;
    if (state.ruleForm.address) vo['address'] = state.ruleForm.address;
    let element = await useGatherApi().getAddressInfo(vo);
    let tempList = [] as any;
    element.children = [];
    element.hasChildren = true;
    tempList.push(element)
    state.dataList = tempList;
}

// 页面加载时
onMounted(async () => {
    if (routerT?.query?.address) {
        state.ruleForm.address = routerT?.query?.address || "";
        getTreeData();
    }
});





</script>



<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
